@charset "UTF-8";
@import "theme/themeColor";

//@media (max-width: 992px) {
//
//  nav.navbar.bootsnav.navbar-mobile ul.nav > li > a {
//    color: #fff;
//  }
//  nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li > a {
//    color: #fff;
//  }
//}

.nav > li:after {
  height: 2px;
}

.nav.navbar-nav i, .nav.navbar-nav i::after {
  margin-right: 4px;
}

.container-fluid {
  padding-right: 0;
  padding-left: 0;
}

.navbar {
  //box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
  box-shadow: 0 1px 4px #eee;
}


nav.navbar.bootsnav ul.nav > li:hover {
  background: $base-color;
}

nav.navbar.bootsnav ul.nav > li.active, nav.navbar.bootsnav ul.nav > li i.active {
  color: $base-color;
}


nav.navbar.bootsnav .navbar-toggle {
  background-color: transparent;
}

@media (max-width: 992px) {
  // 导航边距
  .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }

}

@media (max-width: 768px) {
  nav.navbar.bootsnav.navbar-mobile .navbar-collapse, .navbar-header {
    background-color: $layout--bg-color !important;
  }
  nav.navbar.bootsnav .navbar-toggle {
    top: 0;
  }
  nav.navbar.bootsnav.navbar-mobile ul.nav > li > a {
    color: $text-color;
  }
  nav.navbar.bootsnav .navbar-header, nav.navbar.bootsnav .navbar-nav {
    button.navbar-toggle {
      i {
        color: $text-color;
      }
    }
  }
  .nav.navbar-nav #handleSearch {
    display: none;
  }
  #drawer-mask.navbar-toggle {
    margin-left: 0;
  }
  nav.navbar.bootsnav #drawer-mask.navbar-toggle {
    margin-top: 0;
  }
  nav.navbar.bootsnav .navbar-toggle[aria-expanded=true] .fa {
    visibility: hidden;
  }

  /*适配手机端nav样式。*/
  nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu > li > a {
    color: $text-color;
  }
  nav.navbar.bootsnav ul.nav>li.dropdown>a.dropdown-toggle:after {
    display: none;
  }
  nav.navbar.bootsnav ul.nav li.dropdown ul.dropdown-menu {
  }
}

#drawer-mask {
  position: fixed;
  z-index: 98;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .45);
}

#drawer-mask.navbar-toggle[aria-expanded=false] {
  display: none;
}

#drawer-mask.navbar-toggle[aria-expanded=true] {
  display: block;
}

.blog-container {
  position: relative;
}

#search-form-box {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  transition: all 0.25s;
}

@media (max-width: 768px) {
  #search-form-box {
    padding: 0 15px;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  #search-form-box {
    padding: 0 10%;
  }
}

@media screen and (min-width: 992px) and (max-width: 1170px) {
  #search-form-box {
    padding: 0 35% 0 20%;
  }
}

@media screen and (min-width: 1170px) and (max-width: 1679px) {
  #search-form-box {
    padding: 0 33% 0 13%;
  }
}

@media (min-width: 1679px) {
  #search-form-box {
    padding: 0 42% 0 12%;
  }
}

nav.navbar.bootsnav {
  position: fixed;
  z-index: 300;
  top: 0;
  right: 0;

}

// 1024
@media (min-width: 768px) {
  .night-mode {
    .main-content {
      nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
        background-color: #3f3f3f;

        li {
          &:hover {
            background-color: #5c5c5c;
          }

          > a {
            padding: 10px 15px;
            color: #999999;
            border-bottom: solid 1px #2f2f2f;

            &:hover {
              color: #ffffff;
              background-color: transparent;
            }
          }
        }

      }
    }
  }

  .day-mode {
    nav.navbar.bootsnav ul.nav > li > a {
      color: #474747;
    }

    nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li a:hover {
      background-color: #f4f4f4;
      color: #000000;
    }
  }
}


.night-mode {
  .main-content {
    nav.navbar.bootsnav {
      //box-shadow: 0 1px 4px #2f2f2f;

      box-shadow: 5px 5px 10px -4px #2f2f2f, 5px -5px 10px -4px #2f2f2f;

      ul.nav > li > a {
        //color: #999999;
        // 侧边栏 白天/黑夜 字体都是白色
        color: #ffffff;
      }
    }

    color: #999999;
    background-color: #3f3f3f;

    .navbar-default .navbar-collapse, .navbar-default .navbar-form {
      background-color: #3f3f3f;
    }

    .article-list .article-item {
      border-bottom: 1px dashed rgb(47, 47, 47);
    }

    .article-item {
      .right-html {
        .article-title a, .article p.text, .meta > li i, .meta > li span {
          color: #b1b1b1;
        }
      }

      &:hover {
        .article-title a, .article p.text, .meta > li i, .meta > li span {
          color: #ffffff;
        }
      }
    }

    .footer-container {
      border-top: solid 1px #2f2f2f;

      a {
        background-color: #2f2f2f;

        i {
          color: #999999;
        }
      }
    }
  }
}

.day-mode {
  color: #555555;
  background-color: #ffffff;

  .main-content {

    .navbar {
      //box-shadow: 0 1px 4px #eee;
      box-shadow: 5px 5px 10px -4px #eeeeee, 5px -5px 10px -4px #eeeeee;
    }

    .article-item {
      .right-html {
        .article-title a, .article p.text, ul.meta li > i, .meta li > span {
          color: #555555;
        }

        &:hover {
          .article-title a, .article p.text, ul.meta li > i, .meta li > span {
            color: #000000;
          }
        }
      }

    }
  }

  .footer-container {
    border-top: solid 1px #d9d9d9;

    li {
      color: #999999;
    }

    a {
      i {
        color: #999999;
      }
    }
  }

}

nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
  padding: 0;
}

// 1024
@media (max-width: 768px) {
  //.night-mode {
  //  .main-content {
  //    nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
  //      background-color: #3f3f3f;
  //
  //      li > a {
  //        padding: 10px 15px;
  //        color: #999999;
  //        border-bottom: solid 1px #2f2f2f;
  //      }
  //    }
  //  }
  //
  //  .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  //    background-color: #3f3f3f;
  //  }
  //}
}

.day-mode {
  .article-list {
    background-color: #ffffff;
  }
}

.night-mode {
  .article-list {
    background-color: #3f3f3f;
  }
}

// background-color: #3f3f3f;
// border-bottom: solid 1px #2f2f2f;
// color: #999;

@media (min-width: 768px) {
  .day-mode {
    nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li a:hover {
      background-color: #f4f4f4;
      color: #000000;
    }

    .main-content {
      nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
        li {
          > a {
            padding: 10px 15px;
            color: #555555;

            &:hover {
              color: #000000;
            }
          }
        }

      }
    }
  }
}
